<template>
  <div class="bookcontent">
    <!-- <button class="btn" >点我切换</button> -->
    <!-- 遮罩层内容 -->
    <!-- <div class="tip">已经是第一章了</div> -->

    <div class="mask" v-if="isYes" @click="showTime"></div>
    <div class="wrap" v-if="isYes">
      <div class="wrap-box">
        <div class="content-box">
          <div class="top">
            <div class="top-nav" @click="onClickLeft">
              <van-icon size="25" name="arrow-left" />
            </div>

            <div @click="onToRight">
              <img src="../assets/talk.png" alt="" />
            </div>
          </div>
          <div class="last">
            <div class="last-box">
              <div class="title">标题</div>
              <div class="progress-bar">
                <div >上一章</div>
                <input
                  type="range"
                  style="color: 'white'"
                  max="100"
                  min="0"
                  value="50"
                  step="1"
                />
                <div>下一章</div>
              </div>
              <div class="bottom-btn">
                <div class="bottom-btn-item">
                  <img class="img-auto" src="../assets/list.png" alt="" />
                  <div class="bottom-btn-item-txt">目录</div>
                </div>
                <div class="bottom-btn-item">
                  <img class="img-auto" src="../assets/text.png" alt="" />
                  <div class="bottom-btn-item-txt">设置</div>
                </div>
                <div class="bottom-btn-item">
                  <img class="img-auto" src="../assets/sun.png" alt="" />
                  <div class="bottom-btn-item-txt">夜间</div>
                </div>
                <div class="bottom-btn-item">
                  <img
                    class="img-auto"
                    src="../assets/moreandmore.png"
                    alt=""
                  />
                  <div class="bottom-btn-item-txt">更多</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="content"
      @click="showTime"
      @touchstart="touchStart($event, 100)"
      @touchend="touchEnd($event, 100)"
    >
      <div class="content-data" ref="content" v-html="data"></div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "bookcontent",
  data() {
    return {
      data: '',
      startX: 0,
      startY: 0,
      num: 0,
      show: false,
      isYes: false,
      contentid: [],
      index: 0,
      canshuid: "",
      scrollWidth: 0,
      not: false,
    };
  },
  created() {
    let id = this.$route.params.id;
    // console.log(id);
    this.canshuid = id;
    this.getLiShiPage()
    this.getContentId(id);
  },
  methods: {
    getLiShiPage() {
      if (!localStorage.getItem("pageIndex")) {
        // this.sousuoLishi = [];
        this.index = 0
        // console.log('没有');
      } else {
        let result = JSON.parse(localStorage.getItem("pageIndex"));
        // this.sousuoLishi = result;
        // console.log('有值',result);
        // console.log(result);
              // let newArr =[];
              let flag = true;
        let res = [];
        result.map(function(item){
          flag = true;
          if(res.length<1){
            res.push(item)
          }else {
            res.map(function(item2) {
              if(item2.id === item.id){
                item2.index = item.index;
                flag = false;
              }
            });
            if(flag){
              res.push(item);
            }
          }
        })
        // console.log(res);
        // this.index= res[0].index

        res.forEach((ele,i) => {
          
            if(ele.id == this.canshuid){
              this.index = ele.index
            }          
        })
        // console.log(newArr[newArr.length-1]);

        // this.index = newArr[newArr.length-1].index
      }
    },
//     toNext() {
//       this.$nextTick( () => {
//         let sw = 0
//         sw = Number(this.$refs.content.scrollWidth) - Number(sw);
//         console.log(sw);
//         this.$refs.content.style.transform = "translateX(" + -sw + "px)";
//  this.index ++ ;
//       this.getContentId(this.canshuid);
//       })
     
//     },
    //获取章节的ID
    getContentId(id) {
      this.axios({
        method: "get",
        url: `reader/book/info.json?source_uuid=${id}`,
      })
        .then((result) => {
          // console.log('id',result);
          this.contentid = result.data.data.catalog;
          this.axios({
            method: "get",
            url: `reader/book/content.json?source_uuid=${id}&content_uuid=${
              this.contentid[this.index].secId
            }`,
          })
            .then((dataObj) => {
              // console.log(this.index);
              // console.log(dataObj);
              let objarr = this.data;
              this.data = objarr + dataObj.data.data.content;
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onClickLeft() {
      // console.log(1111);
      var localChatData = localStorage.getItem("pageIndex");
      let bid = this.canshuid;
  
        if (!localChatData) {
          localChatData = [];
        } else {
          localChatData = JSON.parse(localChatData);

        }
        
        let pageData = {
          
            id:this.canshuid,
            index:this.index,
            num:this.num
          
        }
        localChatData.push(pageData);
        
        // console.log(res);
        
        localStorage.setItem("pageIndex", JSON.stringify(localChatData));
      this.$router.go(-1);
      
    },
    onToRight() {
      Toast("暂无评论");
    },
    onClickRight() {
      Toast("已经是第一张了");
    },
    showTime() {
      this.isYes = !this.isYes;
    },
    //获取文章的内容
    // Fun={
    moveRight: function () {
      if (this.num > -this.scrollWidth) {
        
        this.num -= 375;
        this.$nextTick(() => {
          this.$refs.content.style.transform = "translateX(" + this.num + "px)";
        });
      } else {
        this.index++;
        this.getContentId(this.canshuid);

      }
      return this.num;
    },
    moveLeft: function () {
      if (this.num < 0) {
        this.num += 375;
        this.$nextTick(() => {
          this.$refs.content.style.transform = "translateX(" + this.num + "px)";
        });
        // console.log(this.num);
      } else {
        if(this.index <= 0){
          // this.not = true;
          // setTimeout(() =>{
            this.onClickRight() 

          // },1000);
          return;
        }
        this.index--;
        this.getContentId(this.canshuid);
      }
      return this.num;
    },
    touchStart(event) {
      // console.log(this.scrollWidth);
      this.$nextTick(() => {
        this.scrollWidth = this.$refs.content.scrollWidth - 375*2;
        // console.log(this.scrollWidth);
      });

      //console.log('手指按下的时候');
        // console.log(getComputedStyle(event.target)['column-count']);
      this.startX = event.touches[0].pageX;
      this.startY = event.touches[0].pageY;
    },

    touchEnd(event) {
      // console.log(this.num);
      
      let endX = event.changedTouches[0].pageX;
      let endY = event.changedTouches[0].pageY;
      var x = endX - this.startX;
      var y = endY - this.startY;
      var absX = Math.abs(x) > Math.abs(y);
      var absY = Math.abs(y) > Math.abs(x);
      if (x > 0 && absX) {
        // console.log('右滑');
        this.moveLeft();
      } else if (x < 0 && absX) {
        // console.log('左滑');
        this.moveRight();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.top {
}
.book-title {
  font-size: 15px;
  color: #000;
  font-weight: bold;
  margin-top: 100px;
}
.content {
  // background-color: red;

  width: 100vw;
  height: 100vh;
  overflow: hidden;
  // scroll-behavior: smooth;
  // overflow-x: scroll;
}
.content-data {
  padding: 30px 0px;
  // columns: calc(100vw - 16px) 1;
  column-width: 375px;
  column-gap: 0px;
  box-sizing: border-box;
  // column-gap: 30px;
  height: 100%;
  word-break: break-word;
  transition: 0.5s;
  /deep/h1 {
    margin-top: 100px;
    margin-bottom: 100px;
  }
  /deep/p {
    font-size: 18px;
    text-indent: 36px;
    margin-top: 30px;
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
.last {
  color: #fff;
  position: fixed;
  bottom: 0;
  background-color: #000;
  opacity: 0.8;

  width: 100%;
  height: 100px;
  z-index: 1000;
  .last-box {
    margin-top: 10px;
    .title {
      margin-bottom: 10px;
      text-align: center;
    }
  }
  .bottom-btn {
    display: flex;
    border-top: 1px solid white;
    .bottom-btn-item {
      border-right: 1px solid white;
      flex: 1;
      height: 50px;
      text-align: center;
      img {
        margin-top: 5px;
      }
      //   line-height: 50px;
    }
  }
}
.bottom-btn-item-txt {
  // width: 0;
  // display: inline-block;
}
.img-auto {
  width: 16px;
}
/deep/.van-nav-bar__content {
  background-color: #000;
  opacity: 0.8;
}
/deep/.van-icon-arrow-left:before {
  color: white;
}
.progress-bar {
  display: flex;
  justify-content: space-around;
  // div{
  //     flex: 1;
  // }
}
/deep/.top {
  background-color: #000;
  display: flex;
  width: 355px;
  height: 40px;
  position: fixed;
  align-items: center;
  justify-content: space-between;
  padding: 0px 10px;
}
.top-nav{
  width: 30px;
  height: 30px;
}
//遮罩层的样式
</style>